<template>
  <page-header-wrapper>
    <a-card>
      <a-tabs type="card" @change="onTabs">
        <template slot="tabBarExtraContent">
          <a-button size="small" type="primary" icon="plus-circle" v-if="tab == 10" @click="getAddUser">添加组员</a-button>
        </template>
        <a-tab-pane key="10" tab="在职组员"></a-tab-pane>
        <a-tab-pane key="20" tab="离职组员"></a-tab-pane>
      </a-tabs>
      <l-inc v-if="tab == 10"></l-inc>
      <m-leave v-if="tab == 20"></m-leave>
    </a-card>
    <a-modal
      title="添加组员"
      v-model="addVisible"
      :width="600"
      @ok="onSubmit"
      @cancel="resetForm"
    >
      <a-form-model
        ref="addForm"
        :model="addForm"
        :rules="addRules"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
      >
        <a-form-model-item label="用户名" prop="username">
          <a-input type="text" v-model="addForm.username" placeholder="请输入用户名" />
        </a-form-model-item>
        <a-form-model-item label="密码" prop="password">
          <a-input-password v-model="addForm.password" placeholder="请输入登陆密码" />
        </a-form-model-item>
        <a-form-model-item label="密码" prop="password">
          <a-input-password v-model="addForm.password" placeholder="请输入登陆密码" />
        </a-form-model-item>
        <a-form-model-item label="选择顾问类型" prop="group_type_opts">
          <a-select v-model="addForm.group_type_opts" placeholder="选择顾问所属商标/专利/售后">
            <a-select-option v-for="(item,index) in groupTypeOpts" :key="index" :value="index">{{item}}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="选择工作台" prop="group">
          <a-select v-model="addForm.group" placeholder="选择所属工作台">
            <a-select-option v-for="(item,index) in groupOpts" :key="index" :value="index">{{item}}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="选择所属上级" prop="parent_id">
          <a-select
            show-search
            v-model="addForm.parent_id"
            placeholder="选择所属上级"
            :filter-option="filterOption"
          >
            <a-select-option v-for="item in userOpts" :key="item.uid" :value="item.uid">{{item.username}}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="用户状态" prop="status">
          <a-radio-group name="radioGroup" v-model="addForm.status">
            <a-radio v-for="(item, index) in statusOpts" :key="index" :value="index">
              {{item}}
            </a-radio>
          </a-radio-group>
        </a-form-model-item>
        <a-form-model-item label="是否领取新资源" prop="is_can_receive">
          <a-radio-group name="radioGroup" v-model="addForm.is_can_receive">
            <a-radio v-for="(item,index) in ynOpts" :key="index" :value="index">
              {{item}}
            </a-radio>
          </a-radio-group>
        </a-form-model-item>
        <a-form-model-item label="通时限制" prop="receive_is_need_ts">
          <a-radio-group name="radioGroup" v-model="addForm.receive_is_need_ts">
            <a-radio v-for="(item,index) in ynOpts" :key="index" :value="index">
              {{item}}
            </a-radio>
          </a-radio-group>
        </a-form-model-item>
        <a-form-model-item label="添加微信限制" prop="receive_is_need_wx">
          <a-radio-group name="radioGroup" v-model="addForm.receive_is_need_wx">
            <a-radio v-for="(item,index) in ynOpts" :key="index" :value="index">
              {{item}}
            </a-radio>
          </a-radio-group>
        </a-form-model-item>
        <a-form-model-item label="选择角色" prop="role">
          <a-select v-model="addForm.role" placeholder="选择所属上级">
            <a-select-option v-for="(item, index) in roleOpts" :key="index" :value="index">{{item}}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="考拉通讯账号">
          <a-input type="text" v-model="addForm.kaola_accounts" placeholder="输入考拉通信的账号" />
        </a-form-model-item>
        <a-form-model-item label="南方电信账号">
          <a-input type="text" v-model="addForm.nanfang_accounts" placeholder="输入南方电信的账号" />
        </a-form-model-item>
        <a-form-model-item label="云客账号">
          <a-input type="text" v-model="addForm.yunke_accounts" placeholder="输入云客的账号" />
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </page-header-wrapper>
</template>

<script>
  import MLeave from './components/MLeave'
  import LInc from './components/LInc'
  import { getAddMember, postAddMember } from '@/api/member'
  export default {
    components: {
      MLeave,
      LInc
    },
    name: 'Setting',
    data () {
      return {
        labelCol: { span: 6 },
        wrapperCol: { span: 14 },
        queryParam: {},
        tab: '10',
        addForm: {},
        addRules: {
          username: [ { required: true, message: '请输入用户名', trigger: 'blur' } ],
          password: [ { required: true, message: '请输入登陆密码', trigger: 'blur' } ],
          group: [ { required: true, message: '请选择工作组', trigger: 'change' } ],
          group_type_opts: [ { required: true, message: '请选择顾问所属类型', trigger: 'change' } ],
          parent_id: [ { required: true, message: '请选择所属上级', trigger: 'change' } ],
          status: [ { required: true, message: '选择用户状态', trigger: 'change' } ],
          is_can_receive: [ { required: true, message: '选择是否有领取新资源的权限', trigger: 'change' } ],
          receive_is_need_ts: [ { required: true, message: '选择此用户是否限制通时', trigger: 'change' } ],
          receive_is_need_wx: [ { required: true, message: '请选择此用户是否限制微信添加数', trigger: 'change' } ],
          role: [ { required: true, message: '请选择此用户的角色', trigger: 'change' } ]
        },
        addVisible: false,
        groupOpts: {},
        roleOpts: {},
        userOpts: {},
        ynOpts: {},
        statusOpts: {},
        groupTypeOpts: {}
      }
    },
    methods: {
      onTabs (key) {
        this.tab = key
      },
      getAddUser () {
        getAddMember().then(res => {
          if (res.status === 0) {
            this.groupOpts = res.result.group_opts
            this.roleOpts = res.result.role_opts
            this.userOpts = res.result.user_opts2
            this.ynOpts = res.result.yn_opts
            this.statusOpts = res.result.status_opts
            this.groupTypeOpts = res.result.group_type_opts
            this.addVisible = true
          }
        })
      },
      onSubmit () {
        const app = this
        const data = {}
        app.$refs.addForm.validate(valid => {
          if (valid) {
            for (const k in app.addForm) {
              data['user[' + k + ']'] = app.addForm[k]
            }
            postAddMember(data).then(res => {
              if (res.status === 0) {
                app.resetForm()
                app.addVisible = false
                app.$refs.table.refresh(true)
              } else {
                app.$warning({
                  title: res.msg
                })
              }
            })
          } else {
            return false
          }
        })
      },
      resetForm () {
        this.$refs.addForm.resetFields()
      },
      filterOption (input, option) {
        return (option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0)
      }
    }
  }
</script>

<style scoped>

</style>
